<template>
  <div class="customer-wrapper">
    <Button type="primary" @click="handleAdd">新增客户</Button>
    <div class="customer-main">
      <Table
        border
        :columns="columns"
        :data="list"
        :loading="loading"></Table>
    </div>

    <dialog-operator
      :title="title1"
      :formData="form1"
      :type="type"
      v-model="modal1"
      @cancel="handleModal1Cancel"
      @ok="handleModal1Ok"
    ></dialog-operator>

    <dialog-channel
      :title="title2"
      :formData="form2"
      v-model="modal2"
      @cancel="handleModal2Cancel"
      @ok="handleModal2Ok"
    ></dialog-channel>
  </div>
</template>

<script>
  import qs from 'qs';
  import { dateFormat } from '@/static/tools'; 
  import dialogOperator from './components/dialog-operator.vue';
  import dialogChannel from './components/dialog-channel.vue';

  export default {
    name: 'directCustomer',
    data () {
      return {
        columns: [
          { title: '客户名称', key: 'name', align: 'center' },
          { title: '联系方式', key: 'phone', align: 'center' },
          {
            title: '添加时间',
            key: 'ctime',
            align: 'center',
            render: (h, params) => {
              return h('span', dateFormat(params.row.ctime, 'year'));
            }
          },
          { title: '分成比例', key: 'profitRatio', align: 'center' },
          {
            title: '当前状态',
            key: 'status',
            align: 'center',
            render: (h, params) => {
              return h('span', params.row.status === 0 ? '上架' : '下架');
            }
          },
          {
            title: '操作',
            align: 'center',
            render: (h, params) => {
              const { id, name } = params.row;
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '10px'
                  },
                  on: {
                    click: () => {
                      this.handleEdit(id);
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'success',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.handleChannel(id, name);
                    }
                  }
                }, '配置渠道')
              ]);
            }
          }
        ],
        list: [],
        loading: true,
        title1: '新增客户',
        type: '',
        modal1: false,
        form1: {},
        title2: '客户名称',
        modal2: false,
        form2: {}
      }
    },
    created() {
      this.getInvestorList();
    },
    methods: {
      // 获取直投客户列表
      getInvestorList () {
        this.loading = true;
        this.$http.post('/helsinki/admin/investor/list')
        .then(({ data: { data, info, errcode } }) => {
          if (errcode == 0) {
            this.list = data.list;
          }
          this.loading = false;
        }, error => {
          console.log(error);
        });
      },
      // 新增客户
      handleAdd () {
        this.form1 = {};
        this.title1 = '新增客户';
        this.type = 'add';
        this.modal1 = true;
      },
      // 编辑客户信息
      handleEdit (investorId) {
        this.title1 = '编辑客户信息';
        this.type = 'update';
        // 获取客户详情
        this.$http.post('/helsinki/admin/investor/detail', qs.stringify({
          investorId: investorId,
        }))
        .then(({ data: { errcode, info, data } }) => {
          if (errcode == 0) {
            let list = data.list;
            this.form1.id = list.id;
            this.form1.name = list.name;
            this.form1.phone = list.phone;
            this.form1.remark = list.remark;
            this.form1.payChannel = list.payChannel;
            this.form1.payCustomerNo = list.payCustomerNo;
            this.form1.payAk = list.payAk;
            this.form1.paySk = list.paySk;
            this.form1.profitRatio = list.profitRatio;
            this.form1.status = list.status;
            this.form1.loanProductNo = list.loanProductNo;
            this.modal1 = true;
          }
        }, error => {
          console.log(error);
        });
      },
      // 渠道配置
      handleChannel (investorId, name) {
        this.title2 = name;
        this.form2.investorId = investorId;
        this.modal2 = true;
      },
      // 新增 | 编辑 cancel回调函数
      handleModal1Cancel () {
        this.modal1 = false;
      },
      // 新增 | 编辑 success回调函数
      handleModal1Ok () {
        this.modal1 = false;
        this.getInvestorList();
      },
      // 渠道配置 cancel回调函数
      handleModal2Cancel () {
        this.modal2 = false;
      },
      // 渠道配置 success回调函数
      handleModal2Ok () {
        this.modal2 = false;
        this.getInvestorList();
      }
    },
    components: {
      dialogOperator,
      dialogChannel
    }
  }
</script>

<style lang="scss" scoped>
  .customer-wrapper {
    padding: 15px;
  }

  .customer-main {
    margin-top: 15px;
  }
</style>
